<template>
  <div>
    <el-card shadow="always">
      <el-form :inline="true" :model="queryVo" ref="selFromData" class="demo-form-inline">
        <el-form-item label="作业编号:" prop="jid">
          <el-input v-model="queryVo.jid" placeholder="作业编号"></el-input>
        </el-form-item>
        <el-form-item label="司机姓名:" prop="uname">
          <el-input v-model="queryVo.uname" placeholder="司机姓名"></el-input>
        </el-form-item>
        <el-form-item label="作业状态:" prop="jstatus">
          <el-select v-model="queryVo.jstatus" placeholder="作业状态">
            <el-option
              v-for="arrdata in selectData"
              :label="arrdata.value"
              :value="arrdata.key"
              :key="arrdata.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输任务编号:" prop="tid">
          <el-input v-model="queryVo.tid" placeholder="运输任务编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="el">搜索</el-button>
          <el-button @click="resetForm('selFromData')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card class="box-card">
      <el-table
        v-loading="loading"
        :data="pageInfo.list"
        style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (queryVo.pageNum - 1) * queryVo.pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          prop="jid"
          label="作业编号">
        </el-table-column>
        <el-table-column
          width="150"
          prop="uname"
          label="司机姓名">
        </el-table-column>
        <el-table-column
          width="200"
          prop="jname"
          label="所属转运中心">
        </el-table-column>
        <el-table-column
          width="150"
          prop="plate"
          label="车牌号码">
        </el-table-column>
        <el-table-column
          width="200"
          prop="ptime"
          label="计划发车时间">
        </el-table-column>
        <el-table-column
          width="200"
          prop="atime"
          label="实际到达时间">
        </el-table-column>
        <el-table-column
          width="200"
          prop="tid"
          label="任务运输编号">
        </el-table-column>
        <el-table-column
          label="作业状态">
          <template slot-scope="scop">
            <p v-if="scop.row.jtatus === 1">待提货</p>
            <p v-if="scop.row.jtatus === 2">在途</p>
            <p v-if="scop.row.jtatus === 3">已交付</p>
            <p v-if="scop.row.jtatus === 4">作废</p>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="queryVo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryVo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import driverOrder from "../../../api/logisticsmanagement/transportationmanagement/driverOrderManagementAPI"

export default {
  data() {
    return {
      // 加载条
      loading: false,
      pageInfo: {},
      queryVo: {
        "jid": null,
        "uname": null,
        "jstatus": null,
        "tid": null,
        "pageNum": 1,
        "pageSize": 5
      },
      selectData: [
        {"key": 1, "value": "待提货"},
        {"key": 2, "value": "在途"},
        {"key": 3, "value": "已交付"},
        {"key": 4, "value": "作废"}
      ]
    }
  },
  methods: {
    el() {
      this.loading = true
      driverOrder.getdriverData(this.queryVo).then(({data}) => {
        this.pageInfo = data.data
        this.loading = false
      })
    },
    // 设置页条数
    setSize(num) {
      this.queryVo.pageSize = num
      this.el()
    },
    // 设置当前页
    setPage(num) {
      this.queryVo.pageNum = num
      this.el()
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  created() {
    // 数据初始化
    this.el()
  }
}
</script>

<style></style>
